<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象的方法</title>
    <link rel="stylesheet" type="text/css" href="CSS/base.css" />
    <link rel="stylesheet" type="text/css" href="CSS/solidBox.css" />
    <script type="text/javascript" src="JS/tool.domElement.js"></script>
    <script type="text/javascript">
    //面向对象 针对的是选项卡
    //属性 -> 标题对象 内容对象
    //方法 -> 绑定事件的方法 显示内容标题高亮的方法

    //先用es5的模式来写
    //先创建一个构造函数，并添加属性
    function SolidBox(idName){ //es5的构造函数，属性写在构造函数里面，方法绑定在原型链上
        //同样的，第一步，先获取对象
        this.solidBox = document.getElementById(idName)
        this.solidBox_title = this.solidBox.children[0].children
        this.solidBox_content = this.solidBox.children[1].children

        //在构造函数实例化的时候，调用该初始化事件的方法
        this.initEvent()
    }

    //再绑定方法到原型链上，第二步，绑定方法
    //1.初始化事件的方法，记得遵循单一化职责的原则，初始化事件只做循环绑定点击事件这一件事，不要再增加实现效果的代码，实现效果的代码要分开来写
    SolidBox.prototype.initEvent = function (){
        //先保存一下this指向，因为循环中是另一个函数，它的this指向会发生改变
        let self = this
        for(let index = 0; index < this.solidBox_title.length; index++){
            this.solidBox_title[index].onclick = function (){
                //console.log(index)
                self.show(index) //将实现效果的方法函数传入进来即可，遵循了单一化职责原则
            }//es5解决this指向可以用临时变量保存this，也可以在这一行直接.bind(this)。这两种方法选一样就行
        }
    }

    //2.实现效果的方法，第三步，实现效果
    SolidBox.prototype.show = function (index){
        //和面向过程一样，用一个循环来判断绑定点击事件的标题是否被点击了
        for(let j = 0; j < this.solidBox_title.length; j++){
            if(j === index){
                this.solidBox_title[j].className = "hover"
                this.solidBox_content[j].style.display = "block"
            }else{
                this.solidBox_title[j].className = ""
                this.solidBox_content[j].style.display = "none"
            }
        }
    }


    //当浏览器加载成功之后调用该函数
    window.onload = function (){
        var solidBox = new SolidBox("solidBox") //实例化生成一个对象
    }


    </script>
</head>
<body>
<!--第1个盒子-->
<div id="solidBox" class="solidBox">
    <h3 class="solidBox_title clearfix">
        <strong class="hover">足球</strong>
        <strong>篮球</strong>
        <strong>其他</strong>
    </h3>
    <div class="solidBox_content">
        <div style="display: block">足球对应的内容</div>
        <div style="display: none">篮球对应的内容</div>
        <div style="display: none">其他对应的内容</div>
    </div>
</div>
<!--第1个盒子-->
<div id="solidBox1" class="solidBox">
    <h3 class="solidBox_title clearfix">
        <strong class="hover">足球</strong>
        <strong>篮球</strong>
        <strong>其他</strong>
    </h3>
    <div class="solidBox_content">
        <div style="display: block">足球对应的内容</div>
        <div style="display: none">篮球对应的内容</div>
        <div style="display: none">其他对应的内容</div>
    </div>
</div>
</body>
</html>